<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="${basePath}/css/style.css" rel="stylesheet" type="text/css" />
<link href="${basePath}/css/my.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${basePath}/js/jquery.js"></script>

<script type="text/javascript">
	$(document).ready(function() {
		$(".click").click(function() {
			alert("该页面，将显示所有的订单详情！并可以更改订单的物流信息！");
		});

		$(".tiptop a").click(function() {
			$(".tip").fadeOut(200);
			$(".tip2").fadeOut(200);
			$(".tip3").fadeOut(200);
			$(".tip4").fadeOut(200);
		});

		$(".sure").click(function() {
			$(".tip").fadeOut(100);
		});

		$(".cancel").click(function() {
			$(".tip").fadeOut(100);
			$(".tip2").fadeOut(100);
			$(".tip3").fadeOut(200);
			$(".tip4").fadeOut(200);
		});
		
	});

	function onModified(id,num,name) {
		if(num==1){
			$("#classId option").remove();
			$("#classId").append("<option value='2'>已发货</option>");
			$("#classId").append("<option value='3'>已签收</option>");
		}
		if(num==2){
			$("#classId option").remove();
			$("#classId").append("<option value='3'>已签收</option>");
		}
		$('#na').html(name);
		$("#ii").val(id);
		$(".tip").fadeIn(200);
	}
	
	function onck(name,id) {
		var path = "${basePath}";
		$.ajax({
			url : path + '/order/getDateil',
			type : 'POST', // GET
			async : false, // 或false,是否异步
			data : {
				'id' : id
			},
			timeout : 5000, // 超时时间
			dataType : 'json', // 返回的数据格式：json/xml ml/script/jsonp/text
			success : function(data) {
				$("#cla td").remove();
				if (data != 0) {
		            //清空所有的子节点
		            $("#J_TbData").empty();
					for (var i = 0; i < data.products.length; i++) {
						//动态创建一个tr行标签,并且转换成jQuery对象
		                var $trTemp = $("<tr></tr>");
		                //往行里面追加 td单元格
		                $trTemp.append("<td>"+ data.products[i].name +"</td>");
		                $trTemp.append("<td>"+ data.orderNo +"</td>");
		                $trTemp.append("<td>"+ data.products[i].counts +"</td>");
		                $trTemp.appendTo("#J_TbData");
					}
				}
			},
			error : function(xhr, textStatus) {
				alert('错误' + textStatus);
			}
		});
		$('#naa').html(name);
		$(".tip2").fadeIn(200);
	}
	
	function onde(id,name,no) {
		var path = "${basePath}";
		$.ajax({
			url : path + '/order/getDateil',
			type : 'POST', // GET
			async : false, // 或false,是否异步
			data : {
				'id' : id
			},
			timeout : 5000, // 超时时间
			dataType : 'json', // 返回的数据格式：json/xml ml/script/jsonp/text
			success : function(data) {
				if (data != 0) {
					$("#name").val(data.address.name);
					$("#mobile").val(data.address.mobile);
					$("#province").val(data.address.province);
					$("#city").val(data.address.city);
					$("#detail").val(data.address.country+data.address.detail);
				}
			},
			error : function(xhr, textStatus) {
				alert('错误' + textStatus);
			}
		});
		var text = "订单号为的："+no+">>>>>>>的订单:"+name;
		$('#nnn').html(text);
		$(".tip3").fadeIn(200);
	}
</script>
</head>
<body>
	<div class="place">
		<span>位置：</span>
		<ul class="placeul">
			<li><a href="#">首页</a></li>
			<li><a href="#">订单管理</a></li>
		</ul>
	</div>

	<div class="rightinfo">

		<div class="tools">

			<ul class="toolbar">
				<li class="click"><span><img
						src="${basePath}/images/dp.png" /></span>提示</li>
			</ul>
		</div>

		<table class="tablelist">
			<thead>
				<tr>
					<th>编号</th>
					<th>订单号</th>
					<th>用户编号</th>
					<th>下订单时间</th>
					<th>总价格</th>
					<th>总数量</th>
					<th>订单详情</th>
					<th>收获地址</th>
					<th>订单情况</th>
				</tr>
			</thead>
			<c:forEach items="${list}" var="item" varStatus="s">
				<tr>
					<td>${item.id}</td>
					<td>${item.orderNo}</td>
					<td>${item.userId}</td>
					<td>${item.createTime}</td>
					<td>${item.totalPrice}</td>
					<td>${item.totalCount}</td>
					<td><a href="javascript:void(0)" style="color:#00F" onclick="onck('${item.snapName}','${item.id}')">${item.snapName}</a></td>
					<td><a href="javascript:void(0)" style="color:#00F" onclick="onde('${item.id}','${item.snapName}','${item.orderNo}')">查看收获地址</a></td>
					<td>
						<a href="javascript:void(0)"  onclick="onModified('${item.id}','${item.status}','${item.snapName}')">
						<c:if test="${item.status eq 1}">
							<img src="${basePath}/images/buttonwei.png"/>
						</c:if>
						<c:if test="${item.status eq 2}">
							<img src="${basePath}/images/buttonyi.png"/>
						</c:if>
						<c:if test="${item.status eq 3}">
							<img src="${basePath}/images/buttonshou.png"/>
						</c:if>
						</a>
					</td>
				</tr>
			</c:forEach>
		</table>
		<table class="hovertable" style="width: 1718px;">
		<tr>
			<td align="left" style="border:none;">总记录数:${page.total}&nbsp;&nbsp;&nbsp;每页最大显示：${page.show}</td>
			<td style="border:none;">
			<c:if test="${page.page ne '1'}">
				<a href="${basePath}/order/list?page=1" style="color:#000">[首页]</a>&nbsp;&nbsp; 
			    <a href="${basePath}/order/list?page=${page.page-1}" style="color:#000">[上一页]</a>&nbsp;&nbsp;
			</c:if>
			<c:if test="${page.page ne page.totalPage}">
				<a href="${basePath}/order/list?page=${page.page+1}" style="color:#000">[下一页]</a>&nbsp;&nbsp; 
				<a href="${basePath}/order/list?page=${page.totalPage}" style="color:#000">[尾页]</a>&nbsp;&nbsp;
			</c:if> 
			</td>
			<td align="right" style="border:none;">第${page.page}/${page.totalPage}页
			</td>
		</tr>
	</table>


		<div class="tip">
			<div class="tiptop">
				<span>订单情况</span><a></a>
			</div>

			<form method="post" action="${basePath}/order/status" class="basic-grey">
				<h1>
					订单管理 <span>对该订单的情况进行调整：<span style="color:#F00" id="na"></span></span>
				</h1>
				<input type="hidden" name="page" value="${page.page}"/>
				<input type="hidden" id="ii" name="id"/>
				<label>
					<span>订单状况 :</span>
					<select id="classId" name="classId">
						<option value="">--请选择--</option>
					</select>
				</label>
				<div class="tipbtn">
					<input name="" type="submit" class="sure" value="修改" />&nbsp; <input
						name="" type="button" class="cancel" value="取消" />
				</div>
			</form>
		</div>

		<div class="tip2">
			<div class="tiptop">
				<span>查看订单详细</span><a></a>
			</div>

			<form method="post" class="basic-grey" enctype="multipart/form-data">
				<h1>
					订单详情<span>你查看的订单为：<span style="color:#F00" id="naa"></span></span>
				</h1>
			<table class="tablelist">
				<thead>
					<tr>
						<th>订单号</th>
						<th>商品名称</th>
						<th>数量</th>
					</tr>
			</thead>
			<tbody id="J_TbData">
        	</tbody>
		</table>
				<div class="tipbtn">
					<input name="" type="submit" class="sure" value="确定" />&nbsp; 
					<input name="" type="button" class="cancel" value="取消" />
				</div>
			</form>
		</div>

		<div class="tip3">
			<div class="tiptop">
				<span>收货地址</span><a></a>
			</div>

			<form method="post" class="basic-grey" enctype="multipart/form-data">
				<h1>
					订单的收货地址<span>查看该订单的收货地址<span style="color:#F00" id="nnn"></span></span>
				</h1>
				<input id="id" type="hidden"/>
				<label> 
					<span>收货人姓名 :</span> 
					<input id="name" type="text" name="name" readonly="true" />
				</label>
				<label> 
					<span>手机号 :</span> 
					<input id="mobile" type="text" name="mobile" readonly="true" />
				</label>
				<label> 
					<span>市区 :</span> 
					<input id="province" type="text" name="province" readonly="true" />
				</label>
				<label> 
					<span>城市 :</span> 
					<input id="city" type="text" name="city" readonly="true" />
				</label>
				<label> 
					<span>具体 :</span> 
					<input id="detail" type="text" name="detail" readonly="true" />
				</label>
				<div class="tipbtn">
					<input name="" type="submit" class="sure" value="确定" />&nbsp; <input
						name="" type="button" class="cancel" value="取消" />
				</div>
			</form>
		</div>

		<script type="text/javascript">
			$('.tablelist tbody tr:odd').addClass('odd');
		</script>
</body>

</html>
